import { useGetTopNArticle, useGetTopNNEWS } from '@/services/article';
import { useGetTopComment } from '@/services/comment';
import {
  TagsOutlined,
  FieldTimeOutlined,
  EyeOutlined,
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from '@ant-design/icons';
import { ProCard, ProList } from '@ant-design/pro-components';
import { history, styled } from '@umijs/max';
import { Card, Carousel, Layout, Menu, Space, Tag } from 'antd';
import { useMemo, useState } from 'react';
import { OneRowText } from '../article/style';
import { IconText } from '../dashboard/my-articles';
import { CoverImg, OverflowHiddenText } from '../dashboard/my-articles/style';

const CardStyle: React.CSSProperties = {
  width: '80%',
  position: 'absolute',
  bottom: '50px',
  left: '100px',
  fontSize: '50px',
  padding: '0',
  backgroundColor: '#5BD8A6',
};

interface StyledBgImgProps {
  bgimg: string;
}

const StyledBgImg = styled.div<StyledBgImgProps>`
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 1000px;
  height: 500px;
  background: url(${(props) => props.bgimg});
  background-repeat: no-repeat;
  background-size: cover;
  .ant-card-body {
    padding: 0 20px;
  }
`;

const tabsList = [
  { label: '最新', sort: undefined },
  {
    label: '最多人参与',
    sort: (a: API.IArticles, b: API.IArticles) =>
      (b?.commentNum ?? 0) - (a?.commentNum ?? 0),
  },
  {
    label: '最多人看过',
    sort: (a: API.IArticles, b: API.IArticles) =>
      (b?.lookNum ?? 0) - (a?.lookNum ?? 0),
  },
];

const HomePage: React.FC = () => {
  const [current, setCurrent] = useState<string>('最新');
  const { data: carouselRes } = useGetTopNNEWS(3);
  const { data: commentRes } = useGetTopComment();
  const { data: top100 } = useGetTopNArticle(100);
  const [page, setPage] = useState<number>(1);

  const dataSource = useMemo(() => {
    setPage(1);
    return (
      top100?.data &&
      top100.data
        .map((x) => x)
        .sort(tabsList.filter((x) => x.label === current)[0].sort)
        .map((item: API.IArticles) => ({
          ...item,
          title: <OverflowHiddenText row={1}>{item.title}</OverflowHiddenText>,
        }))
    );
  }, [top100, current, page]);

  return (
    <Layout style={{ maxWidth: '1000px', margin: 'auto' }}>
      <Space direction="vertical">
        <Carousel autoplay>
          {carouselRes?.data &&
            carouselRes.data.map((item) => {
              return (
                <StyledBgImg
                  key={item.id}
                  bgimg={item.avatar ?? ''}
                  onClick={() => history.push(`/article?id=${item.id}`)}
                >
                  <Card style={CardStyle}>{item.title}</Card>
                </StyledBgImg>
              );
            })}
        </Carousel>
        <Space style={{ alignItems: 'flex-start' }}>
          <ProList<any>
            pagination={{
              defaultPageSize: 5,
              showSizeChanger: true,
            }}
            onRow={(record: any) => {
              return {
                onClick: () => {
                  history.push(`/article?id=${record.id}`);
                },
              };
            }}
            style={{ width: '700px' }}
            itemLayout="vertical"
            rowKey="id"
            headerTitle={
              <Menu
                onClick={(e) => setCurrent(e.key)}
                style={{ backgroundColor: 'transparent' }}
                selectedKeys={[current]}
                mode="horizontal"
                items={tabsList.map((e) => {
                  return {
                    key: e.label,
                    label: e.label,
                  };
                })}
              />
            }
            dataSource={dataSource}
            metas={{
              title: {},
              subTitle: {},
              description: {
                render: (_, record) => (
                  <Space>
                    <TagsOutlined />
                    {record.tags &&
                      record.tags.split('/').map((tag: string, i: number) => (
                        <Tag color="#5BD8A6" key={i}>
                          {tag}
                        </Tag>
                      ))}
                  </Space>
                ),
              },
              extra: {
                render: (_: any, record: { avatar: string | undefined }) => {
                  return record.avatar ? (
                    <CoverImg src={record.avatar ?? ''}></CoverImg>
                  ) : (
                    ''
                  );
                },
              },
              content: {
                render: (_, record) => {
                  return (
                    <OverflowHiddenText>
                      {record.introduction}
                    </OverflowHiddenText>
                  );
                },
              },
              actions: {
                render: (_, record) => [
                  <IconText
                    icon={FieldTimeOutlined}
                    text={record.time}
                    key="time"
                  />,
                  <span style={{ width: 20 }} key="space"></span>,
                  <IconText
                    icon={EyeOutlined}
                    text={record.lookNum ?? 0}
                    key="list-vertical-eye"
                  />,
                  <IconText
                    icon={StarOutlined}
                    text={record.starNum ?? 0}
                    key="list-vertical-star"
                  />,
                  <IconText
                    icon={LikeOutlined}
                    text={record.likeNum ?? 0}
                    key="list-vertical-like"
                  />,
                  <IconText
                    icon={MessageOutlined}
                    text={record.commentNum ?? 0}
                    key="list-vertical-message"
                  />,
                ],
              },
            }}
          />
          <ProCard style={{ width: '300px' }} title="最近回复">
            {commentRes?.data &&
              commentRes.data.map((item) => (
                <OneRowText
                  key={item.id}
                  onClick={() => history.push(`/article?id=${item.articleId}`)}
                >
                  {item.nickName} 回复了 {item.title}
                </OneRowText>
              ))}
          </ProCard>
        </Space>
      </Space>
    </Layout>
  );
};

export default HomePage;
